<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-14 15:10:10
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-17 23:01:08
-->
<template>
  <div class="preview-view">
    <div class="preview-view-header">
      <div class="title">
        文件预览：<span>{{ fileName }}</span>
      </div>
      <div class="download">
        <a-button type="primary" link @click="onDownload">
          <template #icon> <DownloadOutlined /> </template>
          下载文件
        </a-button>
      </div>
      <div class="close">
        <a-button @click="onClose" danger type="primary">
          <template #icon>
            <CloseOutlined />
          </template>
          关闭预览
        </a-button>
      </div>
    </div>
    <div class="preview-view-wrapper">
      <div class="loading">
        <a-spin
          :spinning="true"
          :indicator="indicator"
          tip="文件预览加载中…"
        ></a-spin>
      </div>
      <iframe
        class="priview-url"
        :src="preivewUrl"
        allowTransparency="true"
      ></iframe>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getGlobalConfig } from "@/helpers/config";
import { icons } from "ant-design-vue/es/image/PreviewGroup";
import { computed, h } from "vue";
import { Base64 } from "js-base64";
import {
  CloseOutlined,
  LoadingOutlined,
  DownloadOutlined,
} from "@ant-design/icons-vue";
const emits = defineEmits(["update:visible", "close"]);

const props = defineProps({
  id: { type: String },
  fileName: { type: String },
  objectName: { type: String },
});

const preivewUrl = computed(() => {
  let { fileHost, previewHost } = getGlobalConfig();
  if (props.id) {
    let originUrl = `${fileHost}/api/file/download/${props.id}?fullfilename=${props.fileName}`;
    let url = encodeURIComponent(Base64.encode(originUrl));
    return `${previewHost}/onlinePreview?url=${url}`;
  } else {
    let originUrl = `${fileHost}/api/file/${props.objectName}`;
    if (props.fileName) {
      originUrl += `?fullfilename=${props.objectName}`;
    }
    let url = encodeURIComponent(Base64.encode(originUrl));
    return `${previewHost}/onlinePreview?url=${url}`;
  }
});

const indicator = h(LoadingOutlined as any, {
  style: {
    fontSize: "32px",
    fontWeith: "bold",
  },
  spin: true,
});

const onDownload = () => {
  if (props.id) {
    let originUrl = `/api/file/download/${props.id}`;
    downloadFile(originUrl, props.fileName);
  } else {
    let originUrl = `/api/file/${props.fileName}`;
    let fileName =
      props.fileName ||
      props.objectName.substring(props.objectName.lastIndexOf("/") + 1);
    downloadFile(originUrl, fileName);
  }
};

const downloadFile = (url: string, fileName: string) => {
  var link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.target = "_blank";
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const onClose = () => {
  emits("close");
  emits("update:visible", false);
};
</script>

<style lang="less" scoped>
.preview-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9000;
  background: #fff;
  position: fixed;
  overflow: hidden;

  &-header {
    flex: none;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #666;

    .title {
      font-size: 16px;
      color: #fff;
      flex: 1;
    }

    .download {
      padding-right: 12px;
    }
  }

  &-wrapper {
    flex: 1;
    overflow: hidden;
    background: #eee;
    position: relative;
    .loading {
      padding: 30px;
      z-index: 1;
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      :deep(.ant-spin-text) {
        margin-top: 24px;
        font-size: 16px;
        color: #0081cc;
      }
    }
    .priview-url {
      z-index: 1;
      position: absolute;
      border: 0 none;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
